$input-number-prefix-cls: "#{$css-prefix}input-number";

@mixin handler-disabled() {
    opacity: $inputnumber-mixin-disabled-opacity;
    color: $inputnumber-mixin-disabled-color!important;
    cursor: $cursor-disabled;
}

.#{$input-number-prefix-cls} {
  $radius-wrap: 0 $btn-border-radius $btn-border-radius 0;

  @include input();
  margin: 0;
  padding: 0;
  width: $inputnumber-width;
  height: $input-height-base;
  line-height: $input-height-base;
  vertical-align: middle;
  border: 1px solid $border-color-base;
  border-radius: $btn-border-radius;
  overflow: hidden;
  
  &-handler-wrap {
    min-width: inputnumber-handler-wrap-min-width;
    height: 100%;
    border-left: 1px solid $border-color-base;
    border-radius: $radius-wrap;
    background: $inputnumber-handler-wrap-background;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    transition: opacity $transition-time $ease-in-out;
  }
  &-arrow-wrap {
      width: $inputnumber-arrow-wrap-width;
      float: left;
  }
  &-prepend, &-append {
    white-space: nowrap;
    vertical-align: middle;
  }
  &-append {
    float: left;
    padding: $inputnumber-padding-vertical $input-padding-horizontal;
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
    color: $input-color;
    text-align: center;
    background-color: $inputnumber-append-background;
  }
  &-append > input{
      
  }
  

  // &:hover &-handler-wrap {
  //   opacity: 1;
  // }

  &-handler-up {
    cursor: pointer;
    &-inner {
      top: $inputnumber-handler-up-inner-top;
    }
  }

  &-handler-down {
    border-top: 1px solid $border-color-base;
    top: $inputnumber-handler-down-top;
    cursor: pointer;
  }

  &-handler {
    display: block;
    width: 100%;
    height: $input-height-base / 2;
    line-height: 0;
    text-align: center;
    overflow: hidden;
    color: $inputnumber-handler-color;
    position: relative;

    &:hover &-up-inner,
    &:hover &-down-inner {
        color: lighten($primary-color, 20%);
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
      width: $inputnumber-handler-down-inner-width;
      height: $inputnumber-handler-down-inner-height;
      line-height: $inputnumber-handler-down-inner-line-height;
      font-size: $font-size-base;
      color: $inputnumber-handler-down-inner-color;
      user-select: none;
      position: absolute;
      right: $inputnumber-handler-down-inner-right;
      transition: all $transition-time linear;
  }

  &:hover {
    @include hover();
  }

  &-focused {
    @include active();
  }

  &-disabled {
    @include disabled();
  }

  &-input-wrap {
    overflow: hidden;
    height: $input-height-base;
  }

  &-input {
    width: 100%;
    height: $input-height-base;
    line-height: $input-height-base;
    padding: $inputnumber-input-padding;
    text-align: left;
    outline: 0;
    -moz-appearance: textfield;
    color:$inputnumber-input-color;
    border: 0;
    border-radius: $btn-border-radius;
    transition: all $transition-time linear;

    &[disabled] {
      @include disabled();
    }
  }

  &-large {
      padding: 0;
      .#{$input-number-prefix-cls}-input-wrap {
          height: $input-height-large;
      }
      .#{$input-number-prefix-cls}-handler {
          height: $input-height-large / 2;
      }

      input {
          height: $input-height-large;
          line-height: $input-height-large;
      }

      .#{$input-number-prefix-cls}-handler-up-inner {
          top: $inputnumber-large-handler-up-inner-top;
      }
      .#{$input-number-prefix-cls}-handler-down-inner {
          bottom:$inputnumber-large-handler-down-inner-bottom;
      }
  }

  &-small {
      padding: 0;
      .#{$input-number-prefix-cls}-input-wrap {
          height: $input-height-small;
      }
      .#{$input-number-prefix-cls}-handler {
          height: $input-height-small / 2;
      }

      input {
          height: $input-height-small;
          line-height: $input-height-small;
          margin-top: -1px;
          vertical-align: top;
      }
      .#{$input-number-prefix-cls}-handler-up-inner {
          top: $inputnumber-small-handler-up-inner-top;
      }
      .#{$input-number-prefix-cls}-handler-down-inner {
          bottom: $inputnumber-small-handler-down-inner-bottom;
      }
  }



  &-handler-down-disabled,
  &-handler-up-disabled,
  &-disabled {
      .#{$input-number-prefix-cls}-handler-down-inner,
      .#{$input-number-prefix-cls}-handler-up-inner {
          @include handler-disabled();
      }
  }

  &-disabled {
      .#{$input-number-prefix-cls}-input {
          opacity: $inputnumber-disabled-opacity;
          cursor: $cursor-disabled;
          background-color: $input-disabled-bg;
      }
      .#{$input-number-prefix-cls}-handler-wrap {
          display: none;
      }
      .#{$input-number-prefix-cls}-handler {
          @include handler-disabled();
      }
  }
  &-readonly {
    .#{$input-number-prefix-cls}-input {
      opacity: $inputnumber-readonly-opacity;
      background-color: $input-disabled-bg;
    }
  }
}

.#{$form-item-prefix-cls}-error {
  .#{$input-number-prefix-cls}{
      @include input-error;
      &-focused {
        @include active-error;
      }
  }
}
.#{$form-item-prefix-cls}-changed {
  .#{$input-number-prefix-cls}{
      @include changed;
  }
}